<template>
  <div class="equip-monitor">
  <template v-if="list.length">  
    <div class="item" v-for="(item,index) in list" :key="index">
      <div class="head j-primary-color j-primary-light-bgcolor">{{ item.equipName || '--' }}</div>
      <div class="body">
        <p class="status">
          <span class="dot" v-if="item.statLatest && item.statLatest.dataValue === '12'"></span>
          <span class="dot j-primary-bgcolor" v-else></span>
          连接状态：
          <span style="color:red;" v-if="item.statLatest && item.statLatest.dataValue === '12'">未连接</span>
          <span style="color:#73da8b;" v-else>已连接</span>
        </p>
         <div class="inner">
           <template v-if="item.dataRtList && item.dataRtList.length"> 
            <div class="pollute" v-for="(item,index) in item.dataRtList" :key="index">
              <div class="name">{{ item.polluteName }}</div>
              <div class="value">{{ item.dataValue }}</div>
              <div class="unit">{{ item.pollConCUnit }}</div>
            </div>
           </template> 
         </div>
      </div>
    </div>
  </template>    
  <div class="empty-data" v-else>
    <img src="/static/images/base/table-emptydata02.png" >
  </div>
  </div>
</template>

<script>
export default {
  props: {
    pointCode: {
      type: String | Number,
      default: ''
    }
  },
  watch: {
    pointCode(n) {
      this.getDataList();
    }
  },
  data() {
    return {
      list: [],
      pollute: [
        { name: '溶解氧', value: 1, unit: 'mg/l' },
        { name: '溶解氧', value: 1, unit: 'mg/l' },
        { name: '溶解氧', value: 1, unit: 'mg/l' },
        { name: '溶解氧', value: 1, unit: 'mg/l' },
        { name: '溶解氧', value: 1, unit: 'mg/l' },
        { name: '溶解氧', value: 1, unit: 'mg/l' }
      ],
      pointList: [],
      pageTotal: 0,
      loading: false,
      columnType: ['selection', 'index'],
      columns: [
        { label: '任务名称', prop: 'taskName' },
        { label: '任务编码', prop: 'taskCode', width: '176px' },
        { label: '任务接收队伍', prop: 'pointName' },
        { label: '水体名称', prop: 'waterName' },
        { label: '企业名称', prop: 'companyName' },
        { label: '排口名称', prop: 'outletName' },
        { label: '经纬度信息', prop: 'lat', width: '176px' },
        { label: '任务紧急程度', prop: 'emergencyTypeName' },
        { label: '任务其他要求', prop: 'requirement' },
        { label: '监测数据查看', prop: 'title' },
        { label: '监测报告', prop: 'title' }
      ],
      multipleSelection: [],
      tableData: [],
      form: {
        equipCode: '',
        pointCode: '',
        statusCode: 'i12001'
      },
      pageNum: 1,
      pageSize: 20
    };
  },
  created() {
    // this.getPointList();
    // this.getDataList();
  },
  methods: {
    search() {
      this.getDataList();
    },
    getPointList() {
      const params = {
        url: `/api/ems/station/list`,
        type: 'post',
        params: {}
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.pointList = rows.map(item => {
            return {
              label: item.pointName,
              value: item.pointCode
            };
          });
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      if (typeof val === 'number') {
        console.log(`当前页: ${val}`, val);
        this.pageNum = val;
        this.getDataList();
      }
    },
    getDataList() {
      const params = {
        url: `/api/ems/equip/list/data`,
        type: 'post',
        params: {
          equipCode: '',
          pointCode: this.pointCode,
          statusCode: 'i12001'
        }
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          this.list = rows;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// $primary-light-bgcolor:  #bad4ec;
// $primary-color:#196FBF;
// .j-primary-color {
//   color:$primary-color !important;
// }
// .j-primary-bgcolor {
//   background-color:$primary-color !important;
// }
// .j-primary-light-bgcolor {
//   background-color: $primary-light-bgcolor !important;
//  }
// .j-primary-border-color {
//   border-color:$primary-color !important;
// }
// .j-primary-light-border-color {
//   border-color: $primary-light-bgcolor !important;
// }
.equip-monitor{
   overflow:hidden;
   .empty-data{
    text-align: center;
    margin: 20px;
   }
  .item{
    float: left;
    width: 200px;
    height: 202px;
    margin: 10px;
    border: 1px solid #edf5f0;
    box-sizing: border-box;
    .head{
      text-align: center;
      font-size: 15px;
      height: 35px;
      line-height: 35px;

    }
    .body{
      background: white;
      // padding: 10px;
      height: 165px;
      .dot{
        display: block;
        width: 5px;
        height: 5px;
        background: red;
        border-radius: 50%;
        margin-right: 5px;
      }
      .status{
        line-height: 30px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .inner{
        height:136px;
        background: #f1f6f9;
        overflow-y: auto;
      }
      .inner::-webkit-scrollbar {
        display: none;
      }
      .pollute{
        overflow: hidden;
        padding: 5px;
        &>div{
          overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 
          float: left;
          text-align: left;
        }
        .name{
           width: 50%;
        }
        .value{
          width: 30%;
        }
        .unit{
          width: 20%;
        }

      }

    }
  }
}
</style>